<template>
    <div class="active-data">
        <p class="prize-title">
            数据概览
            <el-tooltip
                effect="dark"
                show-after="800"
                popper-class="group-statistics-desc-tootip"
                placement="top-start">
                <template #content>
                    <browse-tootip-desc />
                </template>
                <span class="title-label-text-icon">
                    <el-icon class="box-icon"><QuestionFilled /></el-icon>
                </span>
            </el-tooltip>
        </p>
        <div class="data-static">
            <div v-for="(item, index) in dataList" :key="index" class="static-item">
                <div class="item-title">{{ item.name }}</div>
                <div class="item-num">
                    {{ formatStatisticsData(dataView[item.content]) }}<span class="item-title item-unit">人</span>
                </div>
            </div>
        </div>
        <p class="prize-title title-second">引流分组数据</p>
        <div class="container-table">
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :row-key="getRowKey"
                :fetch-api="fetchApi()"
                :close-loading="true"
                :option="tableOption"
                :fetch-data-format="fetchDataFormat"
                :fetch-params="state.searchParams">
            </ZwTable>
        </div>
    </div>
</template>
<script lang="tsx" setup>
import { ref, reactive, computed, onMounted, defineAsyncComponent, markRaw } from 'vue';
import ZwTable from '@/components/zw/table1.0/Table';
import { QuestionFilled } from '@element-plus/icons-vue';
import { staticGroup, dataOverView } from '@/api/smartMarketing/drainage/shuntCode';
import BrowseTootipDesc from './browse-tootip-desc.vue';
import { deepCopy } from '@/utils/helper';
import { useRoute } from 'vue-router';
import { getTextWidth, formatStatisticsData } from '@/utils/utils';

const route = useRoute();
const defaultParams = {
    id: route.query.id //活动ID
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const dataView = ref({});
const dataList = reactive([
    {
        name: '扫码用户总数',
        content: 'visitor_num'
    },
    {
        name: '获客总数',
        content: 'custom_num'
    },
    {
        name: '新客户总数',
        content: 'new_custom_num'
    },
    {
        name: '流失客户总数',
        content: 'lost_num'
    },
    {
        name: '留存客户总数',
        content: 'stay_num'
    }
]);
const getRowKey = (row: any) => {
    return row.id;
};
// 表格
const tableOption = [
    {
        prop: 'group_name',
        label: '引流分组名称/引流员工信息',
        minWidth: 300,
        render({ row, index }: any) {
            const defaultContent = () => (
                <div style="width: 300px;">
                    {row.name}
                    <span v-show={row.is_remove == 1}>（已移除）</span>
                </div>
            );
            return (
                <span class="group-name">
                    {row.group_name ? (
                        <span>
                            {row.group_name || '--'}
                            <span v-show={row.is_delete == 1}>（已删除）</span>
                        </span>
                    ) : (
                        <span class="user-info">
                            <el-image class="user-image" src={row.wx_avatar} fit="cover"></el-image>
                            {getTextWidth(row.is_remove == 1 ? row.name + '（已移除）' : row.name, '14px sans-serif') >
                            250 ? (
                                <el-tooltip
                                    placement="top"
                                    effect="dark"
                                    show-after="800"
                                    vSlots={{ content: defaultContent }}>
                                    <span class="user-name">
                                        {row.name}
                                        <span v-show={row.is_remove == 1}>（已移除）</span>
                                    </span>
                                </el-tooltip>
                            ) : (
                                <span>
                                    {row.name || '--'}
                                    <span v-show={row.is_remove == 1}>（已移除）</span>
                                </span>
                            )}
                        </span>
                    )}
                </span>
            );
        }
    },
    {
        prop: 'custom_num',
        label: '获客数量',
        minWidth: 150,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">
                    通过该活动添加了引流员工的用户数量（包含流失用户，分组数据汇总员工数据未去重）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>获客数量</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },

    {
        prop: 'new_custom_num',
        label: '新客户数量',
        minWidth: 150,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 270px;">
                    通过该活动第一次添加该企业的员工的新用户数量（包含流失用户，分组数据汇总员工数据未去重）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>新客户数量</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'lost_num',
        label: '流失客户数量',
        minWidth: 150,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 250px;">
                    通过该活动添加了引流员工又删除引流员工的用户数量（分组数据汇总员工数据未去重）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>流失客户数量</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'stay_num',
        label: '留存客户数量',
        minWidth: 150,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 260px;">
                    通过该活动添加了引流员工且一直未删除引流员工的用户数量（分组数据汇总员工数据未去重）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>留存客户数量</span>
                    <el-tooltip placement="top" effect="dark" show-after="800" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    }
];
const fetchApi = () => {
    return staticGroup;
};
/**
 * @description: 列表映射 添加主任务子任务折叠功能
 * @param {*} list
 * @return {*}
 */
const fetchDataFormat = (list: any) => {
    return list.map((item: any, index: any) => {
        // 判断条件   work_user_statistics 引流员工存在
        if (item.work_user_statistics && item.work_user_statistics.length) {
            item.children = item.work_user_statistics;
        }
        return item;
    });
};
onMounted(async () => {
    const res = await dataOverView({ id: route.query.id });
    dataView.value = res;
});
</script>
<style lang="scss" scoped>
.active-data {
    padding: 24px;
    padding-top: 0;
    height: calc(100vh - 380px);
    display: flex;
    flex-direction: column;

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    .prize-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #33302d;
        line-height: 16px;
        margin: 26px 0;

        &::before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 16px;
            background: #ff6b00;
            border-radius: 2px;
            margin-right: 6px;
        }

        .title-label-text-icon {
            display: inline-flex;
            align-items: center;
        }
    }

    .title-second {
        margin-bottom: 0;
    }

    .data-static {
        display: flex;

        .static-item {
            width: 20%;

            .item-title {
                font-size: 14px;
                font-weight: 400;
                color: #666;
                line-height: 20px;
                margin-bottom: 8px;
            }

            .item-num {
                font-size: 30px;
                font-weight: 500;
                color: #33302d;
                line-height: 36px;
                margin-bottom: 14px;
            }

            .item-unit {
                color: #33302d;
            }
        }
    }

    :deep(.user-info) {
        display: inline-flex;
        align-items: center;

        .user-image {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .user-name {
            max-width: 250px;
            font-size: 14px;
            font-weight: 300;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }

    :deep(.group-name) {
        height: 46px;
        display: inline-flex;
        align-items: center;
    }

    :deep(.zw-table__com_table.el-table .el-table__body tbody tr td) {
        padding: 5px 0;
    }
}

:deep(.box-item-div) {
    display: flex;
    line-height: 1;
}

:deep(.box-icon) {
    margin-left: 4px;
    color: #969696;
    background: #fff;
    border-radius: 50%;
}

:global(.group-statistics-desc-tootip) {
    max-width: none;
}
</style>
